<template>
  <FModal ref="refFModal" :loading="loading"
          width="960" bodyHeight="500" :header="header" @ok="informUsers">
    <template #contentHeader>
      <FUploader ref="refFUploader"/>
      <el-button round icon="add"
                 style="margin-bottom: 10px" @click="addUser">选择用户
      </el-button>
      <el-text truncated style="width: 500px; padding-left: 20px">
        知会: {{ selectedUserConfigNames }}
      </el-text>
    </template>
    <froala id="edit" :tag="'textarea'" placeholder="请输入评论" :config="froalaConfig"
            v-model:value="comment"></froala>
  </FModal>

  <UserSelectorModal ref="refUserSelectorModal" @selectedUsers="selectedUsers"/>
</template>
<script setup>
import FModal from '@/components/FModal/index.vue';
import {computed, nextTick, shallowRef, unref} from 'vue';
import FUploader from '@/components/FUploader/index.vue';
import {froalaConfig} from '@/components/MyFroala';
import UserSelectorModal from '@/components/UserSelectorModal/index.vue';
import {isEmpty} from '@/utils/CommonUtils';
import {ElMessage} from 'element-plus';
import {postAction} from '@/request/BaseRequest';

defineOptions({
  name: 'InformUserComponent',
});

const refUserSelectorModal = shallowRef();
const comment = shallowRef();
const refFUploader = shallowRef();
const refFModal = shallowRef();
const userConfigs = shallowRef();
const loading = shallowRef();

const props = defineProps({
  userTask: undefined,
});

const emits = defineEmits(['informUserOk']);

function setData() {
  refFModal.value.open();
  nextTick(() => {
    userConfigs.value = undefined;
    comment.value = undefined;
    refFUploader.value.setData('');
  });
}

defineExpose({
  setData
});

function addUser() {
  refUserSelectorModal.value.setData(unref(userConfigs));
}

function selectedUsers(_userConfigs) {
  refUserSelectorModal.value.close();
  userConfigs.value = _userConfigs;
}

function informUsers() {
  if (isEmpty(userConfigs.value)) {
    ElMessage({
      message: '请选择需要知会的用户',
      type: 'warning',
    });
    return;
  }
  let data = {
    userConfigList: unref(userConfigs),
    comment: unref(comment),
    attachmentIds: refFUploader.value.getAttachmentIds(),
    userTaskId: props.userTask.id,
    commentAction: 'informUser',
    commentActionInfo: '知会'
  };

  loading.value = true;
  postAction('/flow/informUsers', data).then(data => {
    loading.value = false;
    if (data.success) {
      // refFModal.value.close();
      ElMessage({
        message: '知会成功',
        type: 'success',
      });
      emits('informUserOk');
      refFModal.value.close();
    }
  });
}

const selectedUserConfigNames = computed(() => {
  let list = unref(userConfigs);
  if (isEmpty(list)) return '';
  let names = list.map(i => i.configName);
  return names.toString();
});
const header = computed(() => {
  return `知会节点: ${props.userTask.taskName}`;
});
</script>
<style>
.f-modal-small-body .add-user-sign-body {
  height: 600px;
  overflow: auto;
}

.f-modal-fullscreen-body .add-user-sign-body {
  height: 100%;
  overflow: auto;
}
</style>
